<template>
  <div class="booking-profile">
    <!-- 用户信息卡片 -->
    <div class="user-info-card">
      <div class="user-avatar">
        <div class="avatar-icon">👤</div>
      </div>
      <div class="user-details">
        <div class="user-status">
          <span class="status-badge" :class="userStore.isTemporary.value ? 'temporary' : 'identified'">
            {{ userStore.isTemporary.value ? '临时用户' : '已识别用户' }}
          </span>
        </div>
        <div class="user-message">
          {{ userStore.getUserSummary().message }}
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <!-- 我的预约菜单项 -->
      <div class="menu-group">
        <div class="menu-item" @click="toggleBookingRecords" :class="{ active: showRecords }">
          <div class="menu-icon">📋</div>
          <div class="menu-text">我的预约</div>
          <div class="menu-arrow" :class="{ expanded: showRecords }">
            {{ showRecords ? '▼' : '›' }}
          </div>
        </div>
        
        <!-- 预约记录展开内容 -->
        <div class="expandable-content" :class="{ expanded: showRecords }">
          <div class="content-wrapper">

            <div class="record-list">
              <div class="record-item" v-for="record in props.bookingRecords" :key="record.id">
                <div class="record-header">
                  <div class="booking-code">预约码: {{ record.code }}</div>
                  <div class="booking-status" :class="record.status">
                    {{ getStatusText(record.status) }}
                  </div>
                </div>
                <div class="record-details">
                  <div class="detail-row">
                    <span class="label">门票类型:</span>
                    <span class="value">{{ record.ticketType }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">参观时间:</span>
                    <span class="value">{{ record.visitTime }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">参观人数:</span>
                    <span class="value">{{ record.visitorCount }}人</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">联系人:</span>
                    <span class="value">{{ record.contactName }}</span>
                  </div>
                </div>
                <div class="record-actions">
                  <el-button 
                    size="small" 
                    @click="viewBookingDetails(record)"
                    class="detail-button"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
              
              <!-- 空状态 -->
              <div class="empty-state" v-if="props.bookingRecords.length === 0">
                <div class="empty-icon">📝</div>
                <div class="empty-text">暂无预约记录</div>
                <div class="empty-desc">您还没有任何预约记录</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备信息菜单项 -->
      <div class="menu-group">
        <div class="menu-item" @click="toggleDeviceInfo" :class="{ active: showDeviceInfo }">
          <div class="menu-icon">📱</div>
          <div class="menu-text">设备信息</div>
          <div class="menu-arrow" :class="{ expanded: showDeviceInfo }">
            {{ showDeviceInfo ? '▼' : '›' }}
          </div>
        </div>
        
        <!-- 设备信息展开内容 -->
        <div class="expandable-content" :class="{ expanded: showDeviceInfo }">
          <div class="content-wrapper">

            <div class="device-details">
              <div class="info-item">
                <span class="info-label">用户标识:</span>
                <span class="info-value">{{ userStore.userToken.value }}</span>
              </div>
              <!-- <div class="info-item" v-if="userStore.identificationStatus.value === 'success'">
                <span class="info-label">设备类型:</span>
                <span class="info-value">{{ deviceInfo.platform }}</span>
              </div>
              <div class="info-item" v-if="userStore.identificationStatus.value === 'success'">
                <span class="info-label">屏幕分辨率:</span>
                <span class="info-value">{{ deviceInfo.screenResolution }}</span>
              </div>
              <div class="info-item" v-if="userStore.identificationStatus.value === 'success'">
                <span class="info-label">时区:</span>
                <span class="info-value">{{ deviceInfo.timezone }}</span>
              </div>
              <div class="info-item" v-if="userStore.identificationStatus.value === 'success'">
                <span class="info-label">语言:</span>
                <span class="info-value">{{ deviceInfo.language }}</span>
              </div> -->
              <div class="info-item">
                <span class="info-label">识别状态:</span>
                <span class="info-value" :class="{ 
                  'status-success': !userStore.isTemporary.value,
                  'status-warning': userStore.isTemporary.value 
                }">
                  {{ userStore.isTemporary.value ? '临时识别' : '正常识别' }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 重新识别菜单项 -->
      <div class="menu-group" v-if="userStore.isTemporary.value">
        <div class="menu-item" @click="refreshUserInfo">
          <div class="menu-icon">🔄</div>
          <div class="menu-text">重新识别</div>
          <div class="menu-arrow">›</div>
        </div>
      </div>
    </div>




  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserStore } from '../stores/user'
import deviceFingerprint from '../utils/deviceFingerprint'

// 显示状态
const showRecords = ref(false)
const showDeviceInfo = ref(false)

// 获取用户状态管理器
const userStore = getUserStore()

// 设备信息
const deviceInfo = computed(() => {
  const info = deviceFingerprint.deviceInfo
  return info || {
    platform: '未知',
    screenResolution: '未知',
    timezone: '未知'
  }
})

// 定义 props 接收预约记录
const props = defineProps({
  bookingRecords: {
    type: Array,
    default: () => []
  }
})

// 定义 emit 事件
const emit = defineEmits(['showBookingDetailsFromProfile'])

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'confirmed': '已确认',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 切换预约记录显示
const toggleBookingRecords = () => {
  showRecords.value = !showRecords.value
}

// 查看预约详情
const viewBookingDetails = (record) => {
  if (record.bookingData) {
    emit('showBookingDetailsFromProfile', record.bookingData)
  } else {
    ElMessage.warning('该预约记录无法查看详情')
  }
}


// 注：取消预约功能已移除

// 切换设备信息显示
const toggleDeviceInfo = () => {
  showDeviceInfo.value = !showDeviceInfo.value
}

// 刷新用户信息（重新识别）
const refreshUserInfo = async () => {
  try {
    await ElMessageBox.confirm(
      '重新识别将清除当前用户信息，确定继续吗？', 
      '重新识别用户', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    ElMessage.info('正在重新识别用户...')
    await userStore.reidentifyUser()
    ElMessage.success('用户重新识别完成')
    
  } catch (error) {
    if (error !== 'cancel') {
      console.error('重新识别用户失败:', error)
      ElMessage.error('重新识别失败，请稍后再试')
    }
  }
}

</script>

<style scoped>
@import '../assets/css/booking/profile.css';

/* 用户信息卡片样式 */
.user-info-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* border-radius: 16px; */
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-avatar {
  flex-shrink: 0;
}

.avatar-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(10px);
}

.user-details {
  flex: 1;
}

.user-status {
  margin-bottom: 12px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.identified {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.status-badge.temporary {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #FFC107;
}

.user-message {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.4;
}

/* 菜单组样式 */
.menu-group {
  background: white;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.menu-item {
  position: relative;
  transition: all 0.3s ease;
}

.menu-item.active {
  background: linear-gradient(135deg, #f8f9ff 0%, #e3e8ff 100%);
  border-left: 4px solid #667eea;
}

.menu-arrow {
  transition: all 0.3s ease;
  font-weight: bold;
  color: #666;
}

.menu-arrow.expanded {
  transform: rotate(0deg);
  color: #667eea;
}

/* 展开内容样式 */
.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  background: #fafbff;
  border-top: 1px solid #e8ebf7;
}

.expandable-content.expanded {
  max-height: 1000px; /* 足够大的高度 */
  padding: 0;
}

.content-wrapper {
  padding: 20px;
  border-top: 1px solid #e8ebf7;
}



/* 设备详情样式 */
.device-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e8ebf7;
  transition: all 0.2s ease;
}

.info-item:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.info-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #333;
  word-break: break-all;
  text-align: right;
  max-width: 60%;
  font-family: 'Courier New', monospace;
}

.status-success {
  color: #4CAF50 !important;
  font-weight: 600;
}

.status-warning {
  color: #FF9800 !important;
  font-weight: 600;
}

/* 预约记录样式优化 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e8ebf7;
  transition: all 0.3s ease;
}

.record-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.booking-code {
  font-weight: 600;
  color: #333;
  font-family: 'Courier New', monospace;
}

.booking-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.booking-status.confirmed {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.booking-status.completed {
  background: rgba(33, 150, 243, 0.1);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.booking-status.cancelled {
  background: rgba(244, 67, 54, 0.1);
  color: #F44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.record-details {
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.detail-row .label {
  color: #666;
  font-size: 14px;
}

.detail-row .value {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.record-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.detail-button {
  background: #667eea;
  border-color: #667eea;
}

.detail-button:hover {
  background: #5a6fd8;
  border-color: #5a6fd8;
}

.cancel-button {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: white;
}

.cancel-button:hover {
  background: #ff5252;
  border-color: #ff5252;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #666;
}

.empty-desc {
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .user-info-card {
    flex-direction: column;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-value {
    max-width: 100%;
    text-align: left;
  }

  .record-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .record-actions {
    justify-content: center;
  }

  .content-wrapper {
    padding: 16px;
  }
}
</style> 